<template>
  <div class="detail">
    <div class="detail__tags">
      <span class="detail__tags__tag" @click="toCarDetail">车型概况</span>
      <span class="detail__tags__tag" @click="toService">生态服务</span>
      <span class="detail__tags__tag" @click="toFunction">亮点功能</span>
      <span class="detail__tags__tag" @click="toNew">交互创新</span>
      <span class="detail__tags__tag" @click="toArguments">性能参数</span>
      <span class="detail__tags__tag" @click="toDefect">产品缺陷</span>
      <span class="detail__tags__tag" @click="toData">使用表现</span>
      <span class="detail__tags__tag" >实拍图片</span>
    </div>
    <router-view class="detail__content" />
  </div>
</template>
<script>
import { useRouter } from "vue-router";
//页面跳转逻辑
const useDetaileEffects = () => {
  const router = useRouter();
  const toService = () => {
    router.push({
      name: "Service",
    });
  };

  const toFunction = () => {
    router.push({
      name: "Function",
    });
  };

  const toCarDetail = () => {
    router.push({
      name: "CarDetail",
    });
  };

  const toNew = () => {
    router.push({
      name: "New",
    });
  };

  const toArguments = () => {
    router.push({
      name: "Arguments",
    });
  };

  const toDefect = () => {
    router.push({
      name: "Defect",
    });
  };

  const toData = () => {
    router.push({
      name: "Data",
    });
  };

  return { toService, toFunction,toCarDetail,toNew,toArguments,toDefect,toData };
};
export default {
  setup() {
    const { toService, toFunction,toCarDetail,toNew,toArguments,toDefect,toData} = useDetaileEffects();
    return { toService, toFunction,toCarDetail,toNew,toArguments,toDefect,toData};
  },
};
</script>
<style lang="scss" scoped>
@import "@/style/viriables.scss";
.detail {
  height: 91vh;
  flex: 1;
  margin-top: 0.5vh;
  margin-left: 1rem;
  background-color: white;
  display: flex;
  flex-direction: column;
  &__tags {
    height: 8rem;
    span:first-child {
      margin-left: 2.1rem;
    }
    &__tag {
      display: inline-block;
      height: 3rem;
      line-height: 3rem;
      margin-top: 2.5rem;
      padding: 0 0.5rem;
      border-bottom: 2px solid $border-gray;
      margin-left: 1.3rem;
      cursor: pointer;
      font-size: 1.6rem;
    }
  }
}
</style>